<template>
    <div class="app">
        <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
            新增设备报修
            </el-button>
  
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
        <div class="banner">
            <el-form :model="form" label-width="120px" ref="formRef" :rules="rules">
                 <!--通知标题  -->
            <el-form-item label="报修人" prop="name">
                <el-input v-model="form.name" placeholder="请输入"/>
            </el-form-item>
             <!--通知标题  -->
             <el-form-item label="受理人" prop="accepter">
                <el-input v-model="form.accepter" placeholder="请输入" />
            </el-form-item>
             <!--通知标题  -->
             <el-form-item label="报修地点" prop="address">
                <el-input v-model="form.address" placeholder="请输入" />
            </el-form-item>
            <!-- 发布时间 -->
                <el-form-item label="报修时间">
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker
                        v-model="form.date1"
                        type="date"
                        placeholder="选择日期"
                        style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="2" class="text-center">
                    <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
                    <el-form-item prop="date2">
                        <el-time-picker
                        v-model="form.date2"
                        placeholder="选择时间"
                        style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
                </el-form-item>
            <!-- 通知内容 -->
            <el-form-item label="报修内容" prop="desc" >
                <el-input v-model="form.desc" type="textarea" placeholder="请输入" />
            </el-form-item>
            <!-- 提交按钮 -->
                <el-form-item>
                <el-button type="primary" :plain="true" @click="onSubmit(formRef)">提交</el-button>
                <el-button @click="onReset(formRef)">取消</el-button>
                </el-form-item>
            </el-form>
            </div>
        </el-drawer>
    </div>
    
  </template>
  
<script setup>
import {useRepairListStore} from '../../../stores/repairlist'
import { reactive ,ref} from 'vue'
const drawer = ref(false)
var formRef = ref();
const form = reactive({
    name: '',
    address:'',
    accepter:'',
    date1: '',
    date2: '',
    desc: '',
})
//定义表单验证规则
const rules = reactive({
  name: [
    { required: true, message: '请输入报修人姓名', trigger: 'blur' },
  ],
  address:[
    { required: true, message: '请输入报修地址', trigger: 'blur' },
  ],
  desc:[
    { required: true, message: '请输入内容', trigger: 'blur' },
  ],
  accepter:[
    { required: true, message: '请输受理人', trigger: 'blur' },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: '请选择发布日期',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: '请选择发布时间',
      trigger: 'change',
    },
  ]
})

//获取仓库数据
let $store= useRepairListStore();
const onSubmit =async (formEl) => {
    if(!formEl) return
    await formEl.validate((valid,fields)=>{
    if(valid){
        console.log('submit!')
        $store.add_tableData(form);
        ElMessage({
        message: '发布通知成功！',
        type: 'success',
    })
    }else{
        console.log('error submit!', fields)
    }
    })
}
//设置取消提交事件
const onReset = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}


</script>

<style scoped>
.banner{
    padding: 100px 0;
}
</style>